<template>
    <div class="HotelTypeList">
        <div class="title">
            <div class="back" @click="router.go(-1)"></div>
            <p>查找酒店</p>
            <div></div>
        </div>

        <ul class="item">
            <li class="item-list" v-for="(item, index) in hotelList.List" :key="index"
                @click="goHotelDetails(item.commonCode,)">
                <div class="item-img">
                    <img class="auto-img" :src="item.image" alt="">
                </div>
                <div class="item-host">
                    <p>{{ item.shopName }}</p>
                    <div class="text">{{ item.shopType }}</div>
                    <div class="text">{{ item.address }}</div>
                    <ul>
                        <li v-for="(value, index) in item.lableList" :key="index">{{ value }}</li>
                    </ul>
                    <div class="item-price">
                        <div></div>
                        <p> <span>￥</span> 299 <span>起</span> </p>
                    </div>
                </div>
                <div class="fullStatus-bg" @click="alerthotel" v-if="(item.fullStatus == 2)">
                    <div class="fullStatus"></div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getSearchHotel } from '@/api/api'
import { showLoadingToast } from 'vant';
import type { searchRelatedType } from '@/tsList/homeFunts'

const router = useRouter()
const route = useRoute()

const hotelList = reactive<{ List: Array<searchRelatedType> }>({
    List: []
})

console.log('route.query.thisTime',route.query.thisTime);
console.log('route.query.overTime',route.query.overTime);


let kk = route.query.thisTime
let gg = route.query.overTime
let area = route.query.area
let startTime = `2023-${kk?.slice(0, 2)}-${kk?.slice(3, 5)}`
let overTime = `2023-${gg?.slice(0, 2)}-${gg?.slice(3, 5)}`

console.log('area', area);
console.log('startTime', startTime);
console.log('overTime', overTime);

function goHotelDetails(commonCode: string) {
    router.push({
        //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
        path: '/HotelDetails',
        query: {
            commonCode: commonCode,
        }
    })
}

function alerthotel() {
    showLoadingToast({
        message: '该房间已订满,请重新选择',
        forbidClick: true,
    });
}

onMounted(() => {
    getSearchHotel(overTime, area, startTime , 'DJJD').then((res) => {
        console.log('res',res);
        if(res.data.content){
            hotelList.List = res.data.content
        }
    })
})

</script>

<style lang="less" scoped>
.auto-img {
    width: 100%;
    height: 100%;
    display: block;
}

.HotelTypeList {

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 10px;
        background-color: white;

        .back {
            width: 20px;
            height: 20px;
            background-size: cover;
            background-image: url('@/assets/icon/ZR.png');
        }

        p {
            font-size: 16px;
            font-weight: 800;
        }
    }

    .item {
        width: 100%;
        min-height: 100vh;

        .item-list {
            margin: 10px 0;
            display: flex;
            padding-left: 10px;
            border-bottom: 1px solid #ddd;
            position: relative;

            .item-img {
                width: 85px;
                height: 85px;
                background-color: black;
                border-radius: 10px;
                overflow: hidden;
            }

            .item-host {
                flex: 1;
                font-size: 12px;
                color: #858585;
                padding: 0 10px;


                p {
                    color: black;
                    font-size: 13px;
                    font-weight: 600;
                }

                .text {
                    width: 234px;
                    transform: scaleX(.9);
                    transform-origin: 0 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    transform: scale(.8);
                    transform-origin: 0 0;
                    height: 20px;
                    overflow: hidden;

                    li {
                        border: 1px solid #ddd;
                        padding: 0 2px;
                        color: black;
                        border-radius: 3px;
                        margin-right: 2px;
                    }
                }

                .item-price {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    p {
                        font-size: 15px;
                        font-weight: 600;
                        color: #f07b22;

                        span {
                            font-size: 12px;
                            font-weight: 400;
                        }

                        span:nth-child(2) {
                            color: #858585;
                        }
                    }
                }
            }

            .fullStatus-bg {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: rgba(224, 224, 224, 0.4);
                z-index: 999;

                .fullStatus {
                    width: 60px;
                    height: 60px;
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                    background-image: url('@/assets/icon/vq.png');
                    background-size: cover;
                }
            }

        }
    }
}
</style>